Positron Notebooks UI sprint #9998
Conversation
… bars. Fix outline colors for error cells
|
E2E Tests 🚀 |
…stem over a bit and using selection bar act as a background extension when the cell is not selected.
nstrayer
force-pushed
the
positron-nb-ui-sprint-9636
branch
from
93b2fc7 to
1fd9e6b
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR implements UI polish improvements for Positron notebooks based on design sprint feedback, focusing on error state visualization, gutter spacing, terminology consistency, and component refactoring.
Key changes:
- Added error state tracking with red visual indicators for failed cell executions
- Refactored selection bar system to use permanent spacers with conditional styling
- Updated all "markup" references to "markdown" for consistency with VS Code terminology
Reviewed Changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
NotebookCellMoreActionsMenu.tsx |
Refactored to use ActionButton component instead of raw button element |
NotebookMarkdownCell.tsx |
Updated class names and text from "markup" to "markdown" |
NotebookMarkdownCell.css |
Renamed CSS class from positron-notebook-markup-rendered to positron-notebook-markdown-rendered |
NotebookCellWrapper.tsx |
Added hasError observable and data-has-error attribute to cell container |
NotebookCellWrapper.css |
Added CSS variables for editor background overrides |
NotebookCellSelection.css |
Refactored selection bar to use permanent spacer approach with conditional color changes and error state styling |
ExecutionStatusBadge.tsx |
Added hasError prop and data-has-error attribute to badge container |
CellLeftActionMenu.tsx |
Added hasError observable consumption and passed to ExecutionStatusBadge |
CellLeftActionMenu.css |
Added error state styling for execution badge using error foreground color |
CellEditorMonacoWidget.css |
Restructured editor borders to work with selection bar, added error state outline styling |
PositronNotebookCodeCell.ts |
Added logic to update hasError observable when cell outputs change |
PositronNotebookCell.ts |
Added hasError observable value initialization |
IPositronNotebookCell.ts |
Added hasError property to interface definition |
| const parsedOutputs = this.parseCellOutputs(); | ||
| // Update hasError when outputs change | ||
| const hasError = parsedOutputs.some(o => o.parsed.type === 'error'); | ||
| this.hasError.set(hasError, undefined); | ||
| return parsedOutputs; | ||
| }); |
There was a problem hiding this comment.
Nit: could keep decouple these observables
this.outputs = observableFromEvent(this, this.cellModel.onDidChangeOutputs, () => {
/** @description cellOutputs */
return this.parseCellOutputs();
});
this.hasError = this.outputs.map((outputs) => outputs.some(o => o.parsed.type === 'error'));or even move hasError to the React component, derived from the outputs state.
There was a problem hiding this comment.
BTW the @descriptions were something I saw upstream that are apparently used in debugging logs, but I haven't actually checked where those logs live, so we can decide whether to keep em.
| const executionStatus = useObservedValue(cell.executionStatus); | ||
| const duration = useObservedValue(cell.lastExecutionDuration); | ||
| const lastRunEndTime = useObservedValue(cell.lastRunEndTime); | ||
| const hasError = useObservedValue(cell.hasError); |
There was a problem hiding this comment.
Might be better to avoid tracking this state both here and in NotebookCellWrapper and making one a prop? We might be doing that in a couple places
|
LGTM thank you |
3 participants
Addresses #9636.
This PR implements several UI polish fixes for the new notebooks frontend from the design sprint:
Error state indication (bcbfbfe)
When a cell execution fails, the selection bar and execution badge now display in red using the error foreground color
Gutter spacing improvements (dcadd3c)
Fixed overlapping between gutter elements (like breakpoints) and the selection bar by moving the entire gutter system over and using the selection bar as a background extension
Warning
This may conflict with #9860 but does it in a different way that should make it easier to handle the change to selection + active cells when it's added for #9848. I am totally fine dropping the commit for this though to avoid conflicts/confusion.
Terminology update (f6a777f)
Changed all instances of "markup" to "markdown" for consistency with VS Code language
Cell action menu padding (1fd9e6b)
Fixed padding issues in the NotebookCellMoreActionsMenu component by refactoring to use the ActionButton component
Warning
Again may conflict a bit with #9860 but gets at the underlying problem of the wrong button component being used for the more actions expansion.
Release Notes
New Features
Bug Fixes
QA Notes
@:positron-notebooks
Testing error indication:
raise Exception("test error")for Python)[N]displays in redTesting selection bar spacing:
Testing markdown terminology:
Testing cell action menu: